<script setup>
import { h } from 'vue'
import { NTag, NImage, NPopover } from 'naive-ui'
import moment from 'moment'

const crudConfig = {
  title: '举报管理',
  apiPrefix: '/forum-reports',
  primaryKey: 'id',
  searchable: true,
  creatable: false,
  editable: false,
  deletable: true,

  // 自定义操作按钮
  customActions: [
    {
      label: '处理',
      type: 'primary',
      // 只有未处理的举报可以点击处理按钮
      show: (row) => row.status === 0,
      onClick: (row) => {
        // 处理举报
        handleReport(row)
      }
    }
  ],

  // 表格列配置
  columns: [
    { title: '举报人昵称', key: 'reporter_nickname',width:150 },
    { title: '举报人手机号', key: 'reporter_phone',width:150 },
    {
      title: '被举报帖子',
      key: 'forum_title',
      width: 300,
      render: (row) => {
        return h('div', { style: 'display: flex; align-items: center; gap: 8px;' }, [
          // 帖子图片
          row.forum_files ? h(NImage, {
            src: row.forum_files,
            width: 40,
            height: 40,
            objectFit: 'cover',
            borderRadius: '4px',
            previewDisabled: false
          }) : null,
          // 帖子标题和内容预览
          h(NPopover, {
            trigger: 'hover',
            placement: 'right'
          }, {
            trigger: () => h('span', { style: 'cursor: pointer' }, row.forum_title),
            default: () => h('div', [
              h('div', { style: 'font-weight: bold; margin-bottom: 8px' }, row.forum_title),
              h('div', { style: 'color: #666; max-width: 300px' }, row.forum_content)
            ])
          })
        ])
      }
    },
    { title: '发帖人昵称', key: 'author_nickname',width:150 },
    { title: '发帖人手机号', key: 'author_phone',width:150 },
    {
      title: '举报类型',
      width:150,
      key: 'report_type',
      render: (row) => {
        const typeMap = {
          spam: { type: 'warning', text: '垃圾广告' },
          inappropriate: { type: 'error', text: '违规内容' },
          harassment: { type: 'error', text: '骚扰' },
          other: { type: 'info', text: '其他' }
        }
        const type = typeMap[row.report_type] || { type: 'default', text: row.report_type }
        return h(NTag, { type: type.type }, { default: () => type.text })
      }
    },
    {
      title: '举报原因',
      key: 'reason',
      width: 200,
      render: (row) => {
        return h(NPopover, {
          trigger: 'hover',
          placement: 'top'
        }, {
          trigger: () => h('span', {
            style: 'cursor: pointer; display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;'
          }, row.reason),
          default: () => row.reason
        })
      }
    },
    {
      title: '状态',
      key: 'status',
      render: (row) => {
        const statusMap = {
          0: { type: 'warning', text: '待处理' },
          1: { type: 'success', text: '已处理' },
          2: { type: 'error', text: '已驳回' }
        }
        const status = statusMap[row.status] || { type: 'default', text: '未知' }
        return h(NTag, { type: status.type }, { default: () => status.text })
      }
    },
    {
      title: '处理结果',
      width:150,
      key: 'result',
      render: (row) => row.result || '-'
    },
    {
      title: '举报时间',
      width:150,
      key: 'created_at',
      render: (row) => moment(row.created_at).format('YYYY-MM-DD HH:mm:ss')
    }
  ],

  // 搜索字段配置
  searchFields: [
    { label: '举报人手机号', key: 'reporter_phone', type: 'input' },
    { label: '发帖人手机号', key: 'author_phone', type: 'input' },
    { label: '帖子标题', key: 'forum_title', type: 'input' },
    {
      label: '举报类型',
      key: 'report_type',
      type: 'select',
      options: [
        { label: '垃圾广告', value: 'spam' },
        { label: '违规内容', value: 'inappropriate' },
        { label: '骚扰', value: 'harassment' },
        { label: '其他', value: 'other' }
      ]
    },
    {
      label: '状态',
      key: 'status',
      type: 'select',
      options: [
        { label: '待处理', value: 0 },
        { label: '已处理', value: 1 },
        { label: '已驳回', value: 2 }
      ]
    },
    {
      label: '举报时间',
      key: 'created_at',
      type: 'date'
    }
  ],

  // 表格配置
  tableConfig: {
    rowKey: 'id',
    pagination: true,
    bordered: false,
    size: 'medium',
    striped: true
  }
}

// 处理举报的方法
const handleReport = async (row) => {
  // TODO: 实现举报处理逻辑
  console.log('处理举报:', row)
}
</script>

<template>
  <crud-table :config="crudConfig" />
</template>

<style scoped lang="scss">
.crud-table {
  :deep(.n-tag) {
    padding: 0 10px;
    height: 24px;
    line-height: 24px;
  }
}
</style>
